import React from 'react'
import { Route } from 'react-router-dom'
import { CSSTransition } from 'react-transition-group'
import 'animate.css'

export default function TransitionRoute({
    component: Component,
    ...props
}) {
    return (
        <Route {...props}>
            {({ match }) => {
                return (
                    <CSSTransition
                        in={match !== null}
                        timeout={500}
                        classNames={{
                            enter: 'animate__animated animate__fadeIn',
                            enterActive: 'animate__animated animate__faster',
                            exit: 'animate__animated animate__fadeOut',
                            exitActive: 'animate__animated animate__faster'
                        }}
                        mountOnEnter={true}
                        unmountOnExit={true}
                    >
                        <Component />
                    </CSSTransition>
                )
            }}
        </Route>
    )
}
